<template>
    <div>
        <h2>机构列表</h2>
        机构名称<input type="text" v-model="list.Name"/>
        特色服务
        <select v-model="list.Type">
            <option>24小时监护</option>
            <option>专属医师</option>
            <option>特殊护理</option>
        </select>

        <input type="button" value="查询" class="btn btn-info" @click="showall"/>

        <input type="button" value="导出" class="btn btn-success" @click="execfn"/>

        <input type="button" value="批量已发布" class="btn btn-warning" @click="allstare(0)"/>
        <input type="button" value="批量未发布" class="btn btn-danger" @click="allstare(1)"/>
        <table class="table table-bordered">
            <tbody>

                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkedall"/></td>
                    <td>机构名称</td>
                    <td>机构封面</td>
                    <td>特色服务</td>
                    <td>营业时间</td>
                    <td>机构地址</td>
                    <td>联系电话</td>
                    <td>发布时间</td>
                    <td>机构详情</td>
                    <td>机构状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.Id">
                    <td><input type="checkbox" v-model="ids" :value="item.Id"/></td>
                    <td>{{item.Name}}</td>
                    <td><img :src="item.Photo" width="100" height="80"/></td>
                    <td>{{item.Type}}</td>
                    <td>{{item.StareTime}}</td>
                    <td>{{item.Addr}}</td>
                    <td>{{item.Phone}}</td>
                    <td>{{item.OpenTime}}</td>
                    <td>{{item.Desc}}</td>
                    <td>{{item.Stare == 1? "已发布":"未发布"}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)"/>
                   
                        <input type="button" value="未发布" class="btn btn-danger" v-if="item.Stare == 1" @click="update(item.Id,0)"/>
                        <input type="button" value="发布" class="btn btn-warning" v-if="item.Stare == 0" @click="update(item.Id,1)"/>
                    </td>
                </tr>

            </tbody>
        </table>

        <div>
            <span>共<b>{{data.totaCount}}</b>条</span>
            <span>每页<b>{{list.PageSizer}}</b>条</span>
            <span>共<b>{{list.PageIdenx}}/{{data.totaPage}}</b>页</span>

            <input type="button" value="首页" @click="sopage(1)"/>
            <input type="button" value="上一页" @click="sopage(list.PageIdenx-1)"/>
            <span v-for="item in data.totaPage" @click="sopage(item)">{{item}}</span>
            <input type="button" value="下一页" @click="sopage(list.PageIdenx+1)"/>
            <input type="button" value="尾页" @click="sopage(data.totaPage)"/>
            <input type="number" v-model="list.PageIdenx"/>
            <input type="button" value="跳转" @click="showall"/>

            <select v-model="list.PageSizer" @change="showall">
                <option :value="item" v-for="item in arr">每页{{item}}条</option>
            </select>
        </div>





    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import {useUserStore} from '@/stores/user'

let router = useRouter();
let route = useRoute();

let list:any=reactive({
    PageIdenx:1,
    PageSizer:2,
    Name:'',
    Type:''
})

let data:any=reactive({
    list:[],
    totaCount:0,
    totaPage:0
})

onMounted(()=>{
    showall();
})

let arr:any=ref([2,4,6])

let checked:any=ref(false)
let ids:any=ref([])
//分页
const sopage = (num:any)=>{
    if(num<1)
    {
        list.PageIdenx = 1;
        return;
    }
    if(num>data.totaPage)
    {
        list.PageIdenx=data.totaPage;
        return;
    }
    list.PageIdenx=num;
    showall();
}

//显示
const showall = ()=>{
    axios({
        url:'http://localhost:5277/api/Gou/ShowGou',
        method:'get',
        params:list
    })
    .then((res)=>{
        Object.assign(data,res.data);
    })
    .catch((err)=>{
        console.log(err)
    })
}

//全选全不选
const checkedall = ()=>{
    checked.value = !checked.value

    if(checked.value == true)
    {
        ids.value=data.list.map((item:any)=>{
            return item.Id
        })
    }
    else
    {
        ids.value=[];
    }
}

//删除
const del = (id:any)=>{
    let f = confirm("确认删除吗？");
    if(f == true)
    {
        axios({
            url:'http://localhost:5277/api/Gou/DelGou',
            method:'delete',
            params:{id:id}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('删除成功');
                showall();
                return;
            }
            else
            {
                alert('删除失败')
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }
}

//导出
const execfn = ()=>{
    location.href = `http://localhost:5277/api/Gou/Execport?PageIdenx=${list.PageIdenx}&PageSizer=${list.PageSizer}&Name=${list.Name}&Type=${list.Type}`
}

//批量修改状态
const allstare = (Stare:any)=>{
    if(ids.value.length == 0)
    {
        alert('请至少选择一项');
        return;
    }
    let f = confirm('确认修改状态吗？');
    if(f)
    {
        axios({
            url:'http://localhost:5277/api/Gou/AllStare',
            method:'post',
            params:{ids:ids.value.toString(),Stare:Stare}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('修改成功')
                showall();
                return;
            }
            else
            {
                alert('修改失败')
                return;
            }
        })
        .catch((err)=>{
            console.log(err)
        })
    }
}

//单个状态
const update = (id:any,Stare:any)=>{
    let f = confirm('确认修改状态吗？');
    if(f)
    {
        axios({
            url:'http://localhost:5277/api/Gou/UpdateStare',
            method:'post',
            params:{id:id,Stare:Stare}
        })
        .then((res)=>{
            if(res.data > 0)
            {
                alert('修改成功')
                showall();
                return;
            }
            else
            {
                alert('修改失败')
                return;
            }
        })
        .catch((err)=>{
            console.log(err)
        })
    }
}


</script>

<style scoped>
span{
    margin: 0 10px;
}
b{
    color: red;
}
input[type="button"]
{
    margin: 0 5px;
}
</style>